<template>
  <div class="m-2">
    <a-card title="季度考核向导" :headStyle="{ fontSize: '24px' }" style="margin-bottom: 16px">
      <div class="step-content">
        <a-steps :current="current">
          <a-step v-for="item in steps" :key="item.title" :title="item.title" />
        </a-steps>
      </div>
    </a-card>

    <a-card>
      <div class="step-content">
        <div class="form_title">季度考核流程启动</div>
        <h4>季度考核流程启动</h4>
        <a-spin :spinning="loading" style="width: 100%; margin: 0 auto">
          <BasicForm @register="registerForm" />
          <div class="z-box-bottom-button offset-20" style="margin-top: 30px">
            <div class="start_btn">
              <a-button type="primary" @click="onSubmit">启动</a-button>
            </div>
          </div>
        </a-spin>
      </div>
    </a-card>
  </div>
</template>
<script lang="ts" setup>
import { ref, provide, onMounted } from 'vue';
import { BasicForm, useForm } from '/@/components/Form/index';
import { getPeriodTreeByQuarter } from '/@/api/common/api';
import dayjs from 'dayjs';
import quarterOfYear from 'dayjs/plugin/quarterOfYear';
dayjs.extend(quarterOfYear);

import { useMessage } from '/@/hooks/web/useMessage';
const { createMessage: $message } = useMessage();

//注册表单
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
  schemas: [
    {
      field: 'periodCode',
      label: '考核周期',
      required: true,
      component: 'ApiTreeSelect',
      componentProps: {
        api: getPeriodTreeByQuarter,
        fieldNames: {
          children: 'child',
          label: 'periodName',
          value: 'periodCode',
        },
      },
      defaultValue: dayjs().startOf('year').format('YYYY') + 'Q' + dayjs().quarter(),
    },
    {
      label: '考核对象',
      field: 'assessPerson',
      required: true,
      component: 'Input',
    },
    {
      field: 'expirationTime',
      label: '截止时间',
      component: 'DatePicker',
      componentProps: {
        format: 'YYYY-MM-DD',
        valueFormat: 'YYYY-MM-DD',
      },
      defaultValue: dayjs(),
      required: true,
    },
    {
      field: 'informMessage',
      label: '通知内容',
      component: 'InputTextArea',
      componentProps: {
        placeholder: '请输入通知内容',
      },
    },
  ],
  showActionButtonGroup: false,
});


const loading = ref<boolean>(true);
const steps = [
  {
    title: '绩效经理人发布月度考核结果',
  },
  {
    title: '绩效经理人季度考核评价',
  },
  {
    title: '绩效管理员月度考核结果汇总发布',
  },
];
const current = ref(0);

// 默认执行一次
onMounted(async () => {
  setTimeout(() => {
    loading.value = false;
  }, 500);
});

// 请求api时附带参数
const params = {};

let reload = () => { };
// 获取内部fetch方法;
function getMethod(m: any) {
  reload = m;
}
// 提交事件
async function onSubmit() {
  $message.info('提交成功！');
}
</script>

<style lang="less" scoped>
.ant-tabs-nav {
  padding: 0 20px;
}

.form_title {
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  padding: 8px 0 48px 0;
}

.form_content {
  :deep .ant-spin-container {
    width: 50%;
    margin: 0 auto;
  }

  :deep .ant-picker {
    width: 100%;
  }
}

.start_btn {
  padding: 10px 16px;
  text-align: center;
  margin-bottom: 16px;
}


.step-content {
  width: 50%;
  margin: 0 auto;
}
</style>
